<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org/" ng-app="appMaps">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script><script src="../dist/angular-google-maps_dev_mapped.js"></script>
    <script type='text/javascript' src='assets/scripts/controllers/issue-992-marker-disappear.js'></script>
    <!--script-->
    <!--css-->
    <style type="text/css">
        html,
        body,
            /*     #map_canvas {
              height: 100%;
              width: 100%;
              margin: 0px;
            }
            #map_canvas {
              position: relative;
            } */
        .angular-google-map-container {
            width: 100%;
            height: 600px;
        }
        .testbtn {
            position: absolute;
            top: 30px;
            right: 30px;
            width:100px;
            height:100px;
            background-color:#cc0000;
            z-index: 2;
        }
    </style>
</head>

<body>
<div id="map_canvas" ng-controller="mainCtrl">
    <button class="testbtn" ng-click="updateMarkerLocation()">
        update marker position

    </button>
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
        <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
        </ui-gmap-marker>
    </ui-gmap-google-map>
    <div ng-cloak>
        <ul>
            <li>coords update ctr: {{coordsUpdates}}</li>
            <li>dynamic move ctr: {{dynamicMoveCtr}}</li>
        </ul>
    </div>
</div>
<!--example-->
</body>

</html>
